<template>
	<view class="mask">
		<view class="mian">
			<text class="title">开除</text>
			<text class="subhead">{{subhead}}</text>
			<view class="select-item">
				<!-- 	<view :class="selectItem==item?'select-item-list-selected':'select-item-list'" v-for="item in items" @click="selectItem=item">{{item}}</view> -->
			</view>
			<view class="button">
				<view class="button-no" @click="closePage()">取消</view>
				<view class="button-yes" @click="kaichu()">确认</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			type: {
				type: Number,
				default: 0
			},
		},
		data() {
			return {
				subhead: '雇员正在赶来的路上,  确认开除吗？',
				items: [],
				selectItem: '',
			}
		},
		methods: {
			closePage() {
				this.$emit('closeKaichu')
			},
			kaichu() {
				this.$emit('kaichu', this.selectItem)
			},
		},
		beforeMount() {
			switch (this.type) {
				case 0:
					this.subhead = '雇员正在赶来的路上,  确认开除吗？'
					this.items = uni.getStorageSync('property_list_by_type').send_not_down.split(',')
					break;
				case 1:
					this.subhead = '雇员已经开始工作了,  确认开除吗？'
					this.items = uni.getStorageSync('property_list_by_type').send_down.split(',')
					break;
				default:
					this.subhead = '雇员正在赶来的路上,  确认开除吗？'
					this.items = uni.getStorageSync('property_list_by_type').send_not_down.split(',')
					break;
			}
		},
	}
</script>
<style lang="less" scoped>
	.mask {
		width: 750rpx;
		height: 100vh;
		background-color: rgba(0, 0, 0, .6);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.mian {
		width: 550rpx;
		background-color: #FFFFFF;
		border-radius: 24rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.title {
		display: inline-block;
		font-size: 36rpx;
		font-weight: bold;
		color: #1A1A1A;
		line-height: 36rpx;
		margin: 60rpx 0 40rpx 0;
	}

	.subhead {
		display: inline-block;
		font-size: 32rpx;
		font-weight: 500;
		color: #515151;
		line-height: 32rpx;
		margin-bottom: 28rpx;
	}

	.select-item {
		width: 478rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.select-item-list {
		width: 227rpx;
		height: 66rpx;
		background: #FFFFFF;
		border: 1rpx solid #BDBDBD;
		border-radius: 8rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #A5A5A5;
		line-height: 66rpx;
		text-align: center;
		margin-bottom: 20rpx;
	}

	.select-item-list-selected {
		width: 229rpx;
		height: 68rpx;
		background: #FCC928;
		border-radius: 8rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #402110;
		line-height: 68rpx;
		text-align: center;
		margin-bottom: 20rpx;
	}

	.button {
		width: 550rpx;
		height: 80rpx;
		display: flex;
		flex-direction: row;
		border-top: 1rpx solid #BDBDBD;
	}

	.button-no {
		width: 275rpx;
		height: 80rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #7F7F7F;
		line-height: 80rpx;
		text-align: center;
		border-right: 1rpx solid #BDBDBD;
	}

	.button-yes {
		width: 274rpx;
		height: 80rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #1A1A1A;
		line-height: 80rpx;
		text-align: center;
	}
</style>
